<template>
  <div class="system-customer">
    <xr-header/>


    <div class="customer-content">
      <div class="system-view-nav">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"/>

      </div>

      <div class="system-view-content" >
        <div class="option-bar">
          <el-form :inline="true" :model="queryForm" style="margin-left: -15px;" size='mini' label-width="88px">

            <el-form-item label="对象名" label-width="68px">
              <el-input v-model="queryForm.objKey" clearable></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="queryForm.objName" clearable></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="queryForm.objDesc" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button type="default" @click="reset">重置</el-button>
            </el-form-item>
          </el-form>



          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" @click="add('inner')" size='mini'>新增</el-button>

            </el-col>
            <el-col :span="1.5">
              <el-button type="success" @click="synchronization" size='mini'>导出</el-button>

            </el-col>
            <el-col :span="1.5">
              <data-source :value="multipleSelection" tableName="PANGU_FORM_BUS_OBJECT" size='mini'></data-source>
            </el-col>
            <el-col :span="1.5">
              <el-upload
                :action="baseUploadURL"
                :on-success="handleAvatarSuccess"

              >
                <el-button size="mini" type="primary">导入</el-button>
              </el-upload>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="cyan"
                size="mini"
                :disabled="multiple"
                @click="handleEs"
              >同步到ES
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="danger"
                size="mini"
                :disabled="multiple"
                @click="handleDelete"
              >删除
              </el-button>
            </el-col>
          </el-row>
        </div>
        <el-row style="margin-top: 10px">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
              @selection-change="handleSelectionChange"

            >
              <el-table-column
                type="selection"
                fixed
                width="55">
              </el-table-column>
              <el-table-column
                label="序号"
                type="index"
                width="50"
                fixed
                align="center">
                <template slot-scope="scope">
                  <span>{{(queryForm.page-1 ) * queryForm.pageSize + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column

                prop="objKey"
                label="对象名"
                width='180'
                show-overflow-tooltip
              />
              <el-table-column
                prop="objName"
                label="名称"
                width='180'
                show-overflow-tooltip
              />
              <el-table-column
                prop="objDesc"
                label="描述"
                width='300'
                show-overflow-tooltip
              />

              <el-table-column
                fixed="right"
                label="操作"
              >
                <template slot-scope="scope">


                  <el-button size='mini' type='text' icon="el-icon-edit" @click="handleClick(scope.row)">编辑
                  </el-button>
                  <el-divider direction="vertical"></el-divider>

                  <el-button size='mini' type='text' icon="el-icon-delete" @click="handleDelClick(scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            background
            class="p-bar"

            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </div>



      </div>
    </div>
    <Modal
      title="Title"
      v-model="busObj"
      :transfer="false"
      :mask-closable="false">

    </Modal>

  </div>

</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .option-bar {
    padding: 15px 20px;
  }
  .system-customer {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  .customer-content {
    flex: 1;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .system-view-nav {
    min-width: 200px;
    background: #fff;
    margin-right: 10px;
    padding-top: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;

  }
  .system-view-content {
    flex: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
  }

  // 菜单
  .menu-item {
    color: #333;
    font-size: 13px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    .icon-close {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 1;
      display: none;
    }
  }

  .menu-item:hover,
  .menu-item.is-select {
    background-color:  #F6F8FA;
  }

  .menu-item:hover::before,
  .menu-item.is-select::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ed;
  }
</style>

<script>
  import {download} from '@/api/analy'
  import {
    businessObjectDel,
    businessObjectGetStruct,
    businessObjectList,
    getTypesByKey,
    removeBusinessObject,
    removeBusinessObjectEs,
    synchronizationBusinessObject
  } from '@/api/form'

  import DataSource from '@/components/plug/DataSource'
  import XrHeader from '@/components/XrHeader'

  export default {
    name: 'Task',
    components: {
      DataSource,
      XrHeader
    },

    data() {
      return {
        multiple: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        baseUploadURL: process.env.VUE_APP_BASE_BPM_API + "form/bus/businessObject/importExcle",

        cmOptions: {
          value: '',
          mode: "application/json",
          theme: "ambiance",
          readOnly: true,
        },
        busObj: false,
        busStruct: "",
        tableData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        chartData: {},
        sellerId: 0,
        shopName: [],
        queryForm: {
          groupId: '',
          objName: '',
          objDesc: '',
          objKey: '',
          page: 1,
          pageSize: 10,
          limit: 10
        },
        multipleSelection: [],
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.initData()
    },
    methods: {
      handleAvatarSuccess(res, file) {
        if (res.code == 0) {
          this.getData();
          this.$message({"duration": '800', message: '导入成功', type: 'success', customClass: 'zZindex'});

        } else {
          this.$message({"duration": '800', message: '导入失败', type: 'warning', customClass: 'zZindex'});

        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.ids = val.map(item => item.id)
        this.single = val.length !== 1
        this.multiple = !val.length
      },
      synchronization() {
        synchronizationBusinessObject(this.multipleSelection).then((response) => {
          download(response, '业务对象')
        })
      },
      getStruct: function (data) {
        this.busObj = true;
        businessObjectGetStruct(data.id).then((response) => {
          this.busStruct = response.data
        })
      },
      add: function (type) {
        this.$router.push({name: 'businessObjAdd', query: {t: new Date().getTime(), 'operate': 'inner'}})
      },
      queryFormCreateTime: function (e) {
        this.queryForm.createTime = e
      },
      refreshTask: function (data) {
        this.queryForm.page = 1
        if (data[0].parentId == '-1') {
          this.queryForm.groupId = ''
        } else {
          this.queryForm.groupId = data[0].id
        }
        this.queryForm.page = 1

        this.getData()
      },
      queryMethod: function () {
        this.getData();
      },
      getTypesByKeyAction: function () {
        getTypesByKey().then((response) => {
          this.categoryData = response.data
        })
      },
      initData: function () {
        this.getTypesByKeyAction();
        this.getData();
      },
      getData: function () {

        businessObjectList(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count)
        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      handleClick(data) {

        this.$router.push({
          name: 'businessObjAdd',
          query: {t: new Date().getTime(), 'id': data.id, 'operate': data.type, "edit": true}
        })

      },
      handleDelete() {
        removeBusinessObject({ids: this.ids}).then((response) => {
          if (response.code == 0) {
            this.getData()
          } else {
            this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

          }
        })
      },
      handleEs() {
        removeBusinessObjectEs({ids: this.ids}).then((response) => {
          if (response.code == 0) {
            this.$message({"duration": 800, message: '同步成功', type: 'success', customClass: 'zZindex'});
          } else {
            this.$message({"duration": '800', message: response.msg, type: 'warning', customClass: 'zZindex'});

          }
        })
      },

      handleDelClick(data) {
        businessObjectDel(data.id).then((response) => {
          if (response.code == 0) {
            this.$message({"duration": 800, message: '操作成功', type: 'success', customClass: 'zZindex'});

            this.getData()
          } else {
            this.$message({"duration": 800, message: response.msg, type: 'warning', customClass: 'zZindex'});

          }


        })
      },
      search() {
        this.queryForm.page = 1
        this.queryMethod()
      },
      reset() {
        this.queryForm.name = ''
        this.queryForm.createTime = ''
        this.queryForm.whereSql = ''
        this.queryForm.objName = ''
        this.queryForm.objDesc = ''
        this.queryForm.objKey = ''
        this.queryDate = []
        this.getData()
      }

    }

  }

</script>
<style lang="scss">
  .task-card {
    margin-top: 10px;
  }

</style>
<style lang="scss" scoped>
  /deep/ .el-upload-list__item {
    display: none; /* 上传按钮隐藏 */
  }

</style>
<style lang="scss" scoped>
  /* button color */
  .el-button--cyan.is-active,
  .el-button--cyan:active {
    background: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
  }

  .el-button--cyan:focus,
  .el-button--cyan:hover {
    background: #48D1CC;
    border-color: #48D1CC;
    color: #FFFFFF;
  }

  .el-button--cyan {
    background-color: #20B2AA;
    border-color: #20B2AA;
    color: #FFFFFF;
  }

  /* text color */
  .text-navy {
    color: #1ab394;
  }

  .text-primary {
    color: inherit;
  }

  .text-success {
    color: #1c84c6;
  }

  .text-info {
    color: #23c6c8;
  }

  .text-warning {
    color: #f8ac59;
  }

  .text-danger {
    color: #ed5565;
  }

  .text-muted {
    color: #888888;
  }

  /* image */
  .img-circle {
    border-radius: 50%;
  }

  .img-lg {
    width: 120px;
    height: 120px;
  }

  .avatar-upload-preview {
    position: absolute;
    top: 50%;
    transform: translate(50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 4px #ccc;
    overflow: hidden;
  }

  /* 拖拽列样式 */
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }

  .top-right-btn {
    position: relative;
    float: right;
  }

  .main-div {
    background-color: white !important;
  }

</style>
